<template>
  <div>
    <el-container style="height: 600px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: white">
        <el-menu :default-openeds="['1']">

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-postcard"></i>信息修改</template>
            <el-menu-item-group>

              <router-link class="alink" to="/showinfo">
                <el-menu-item index="1-1">
                  基本信息
                </el-menu-item>

              </router-link>

              <router-link class="alink" to="/infoeditor">
                <el-menu-item index="1-2">
                  信息修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/imageUp">
                <el-menu-item index="1-3">
                  头像修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/countcontrol">
                <el-menu-item index="1-4">
                  账号管理
                </el-menu-item>
              </router-link>


            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-postcard"></i>文章管理</template>
            <el-menu-item-group>
              <router-link class="alink" to="/articlecontrol">
                <el-menu-item index="2-1">
                  文章管理
                </el-menu-item>
              </router-link>

            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-edit"></i>文章书写
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/writearticle">
                <el-menu-item index="3-1">
                  文章书写
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>关注的人
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/checkFollow">
                <el-menu-item index="3-1">
                  关注的人
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>

        </el-menu>
      </el-aside>


      <el-container>
        <el-container>
          <el-main>
            <div style="width: 80%;margin: 0 auto">
              <div>
                <div class="show">
                  <div class="show1" >
                    <img ref="showing" src="" id="showimg" style="margin-left: 1px;margin-top: 3px">
                  </div>
                  <br>
                  <div class="upload">图片选择
                    <input multiple="multiple" id="file" ref="file"
                           accept=".jpg,.png"
                           @click="changepic(this)" type="file" name="userpic"
                           style="
              position: absolute;
              overflow: hidden;
              right: 0;
              top: 0;
              opacity: 0;
             width: 100%;
             height: 32px;
             "
                    >
                  </div>
                  <button @click="avatarAdd()" style="height: 40px;position: relative; margin-left:35%;">确定</button>
                </div>

              </div>
            </div>
          </el-main>
        </el-container>

      </el-container>

    </el-container>

  </div>

</template>

<script>
import user from "@/store/user";

export default {
  name: "imageUp",
  data(){
    return {
      filename: null,
      f64: null,
      loadImage: "",
      fileLink:""
    }
  },
  methods: {
    changepic() {
      document.getElementById('file').onchange = function () {
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function () {
          let showing = document.getElementById('showimg')
          let img = fr.result;
          this.f64 = img;
          this.filename = imgFile.name
          showing.src = img;
          showing.style.height = "220px";
          showing.style.width = "220px";
          showing.style.borderRadius = "200px"
        };
        fr.readAsDataURL(imgFile);
      }
    },
    avatarAdd(){
      var formdata = new FormData();
      var link;
      formdata.append("file", document.getElementById('file').files[0]);
      this.$axios({
        url: '/imgUpload',
        method: 'post',
        data: formdata,
        dataType: "json",
        cache: false,
        processData: false,
        headers: {'Content-Type': 'multipart/form-data'},
      })
          .then(res => {
            // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
            if (res.data.code === 0) {
              link = res.data.data
              const userInfo = user.getters.getUser(user.state());

              if(userInfo===null){
                this.$message.warning("请先登录");
                this.$router.push('/login');
                return;
              }
              this.$axios({
                method: 'post',           /* 指明请求方式，可以是 get 或 post */
                url: '/user/avatarModify',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
                data:({
                  userID:userInfo.user.userID,
                  avatarUrl:link
                })
              })
                  .then( res => {
                    if (res.data.code === 0) {
                      this.$message.success("更改成功")
                    }
                  })
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })


    }

    }
}
</script>

<style scoped>

.upload{
  margin-left: 20%;
  width: 12%;
  text-align: center;
  color: white;
  height: 32px;
  border-radius: 3px;
  background: #1E90FF;
  cursor: pointer;
  outline: none;
  border-width: 0px;
  font-size: 17px;
  display:inline-block;
  padding: 4px 10px;
  line-height:30px;
  position: relative;
  text-decoration: none;

}

button {
  margin-left: 70%;
  width: 15%;
  height: 35px;
  border-width: 0px;
  border-radius: 3px;
  background: #1E90FF;
  cursor: pointer;
  outline: none;
  color: white;
  font-size: 17px;
}
.show{
  margin: 100px auto;
  width: 80%;
  height: 450px;
  border: 5px solid #18a0ec;
  transition: all 0.9s;
  border-radius: 10px;

}
.show1{
  margin: 50px auto;
  width: 222px;
  height: 226px;
  border: 5px solid #18a0ec;
  transition: all 0.9s;
  border-radius: 150px;

}

.show1:hover{
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  margin-top: 45px;
}

.show:hover{
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  margin-top: 45px;

}

.texti{
  border: 1px solid #ccc;
  padding: 13px 14px;
  width: 30%;

  font-size: 14px;
  font-weight: 300;

  border-radius: 5px; /* 边框半径 */
  background: white; /* 背景颜色 */
  cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
  outline: none; /* 不显示轮廓线 */


}
.texti:focus{
  border-color: #1e88e1;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
textarea {
  resize: none;

}
</style>
